<template>
	<view class="custom-button" :class="[
      type ? `btn-${type}` : '',
      size ? `btn-${size}` : '',
      disabled ? 'btn-disabled' : '',
      iconPosition === 'right' ? 'icon-right' : ''
    ]" @click="$emit('click')" :style="{
      width: width,
      height: height,
      borderRadius: borderRadius,
      backgroundColor: bgColor,
      color: textColor,
      fontSize: fontSize,
      borderColor: borderColor,
      borderWidth: borderWidth
    }">
		<!-- 图标在左侧 -->
		<u-icon v-if="icon && iconPosition !== 'right'" :name="icon" :size="iconSize" :color="iconColor || textColor"
			class="btn-icon left-icon"></u-icon>

		<!-- 按钮文字 -->
		<text class="btn-text"
			:style="{ marginLeft: icon ? iconSpacing : 0, marginRight: icon && iconPosition === 'right' ? iconSpacing : 0 ,color: textColor,fontSize: fontSize}">
			{{text}}
		</text>

		<!-- 图标在右侧 -->
		<u-icon v-if="icon && iconPosition === 'right'" :name="icon" :size="iconSize" :color="iconColor || textColor"
			class="btn-icon right-icon"></u-icon>
	</view>
</template>

<script>
	export default {
		name: 'CustomButton',
		props: {
			// 按钮类型
			type: {
				type: String,
				default: 'primary',
				validator: (value) => {
					return ['primary', 'success', 'warning', 'error', 'info', 'default', 'text'].includes(value)
				}
			},
			text: {
				type: String,
				default: ''
			},
			// 按钮尺寸
			size: {
				type: String,
				default: 'default',
				validator: (value) => {
					return ['large', 'default', 'small', 'mini'].includes(value)
				}
			},
			// 图标名称
			icon: {
				type: String,
				default: ''
			},
			// 图标位置
			iconPosition: {
				type: String,
				default: 'left',
				validator: (value) => {
					return ['left', 'right'].includes(value)
				}
			},
			// 图标大小
			iconSize: {
				type: [Number, String],
				default: '20px'
			},
			// 图标颜色
			iconColor: {
				type: String,
				default: ''
			},
			// 图标与文字间距
			iconSpacing: {
				type: [Number, String],
				default: '8px'
			},
			// 是否禁用
			disabled: {
				type: Boolean,
				default: false
			},
			// 自定义宽度
			width: {
				type: String,
				default: 'auto'
			},
			// 自定义高度
			height: {
				type: String,
				default: ''
			},
			// 文字颜色
			textColor: {
				type: String,
				default: '#000'
			},
			// 背景颜色
			bgColor: {
				type: String,
				default: ''
			},
			// 边框颜色
			borderColor: {
				type: String,
				default: ''
			},
			// 边框宽度
			borderWidth: {
				type: String,
				default: '0'
			},
			// 圆角大小
			borderRadius: {
				type: String,
				default: '6px'
			},
			// 字体大小
			fontSize: {
				type: String,
				default: ''
			}
		}
	}
</script>

<style scoped>
	.custom-button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 0 16px;
		box-sizing: border-box;
		transition: all 0.2s ease;
		cursor: pointer;
		user-select: none;
		white-space: nowrap;
	}

	/* 按钮尺寸样式 */
	.btn-large {
		height: 48px;
		font-size: 16px;
	}

	.btn-default {
		height: 40px;
		font-size: 14px;
	}

	.btn-small {
		height: 32px;
		font-size: 14px;
		padding: 0 12px;
	}

	.btn-mini {
		height: 28px;
		font-size: 12px;
		padding: 0 8px;
	}

	/* 按钮类型样式 */
	.btn-primary {
		background-color: #2979ff;
		color: #ffffff;
	}

	.btn-success {
		background-color: #00b42a;
		color: #ffffff;
	}

	.btn-warning {
		background-color: #ff7d00;
		color: #ffffff;
	}

	.btn-error {
		background-color: #f53f3f;
		color: #ffffff;
	}

	.btn-info {
		background-color: #86909c;
		color: #ffffff;
	}

	.btn-default {
		background-color: #f2f3f5;
		color: #4e5969;
	}

	.btn-text {
		background-color: transparent;
		color: #2979ff;
	}

	/* 禁用状态 */
	.btn-disabled {
		opacity: 0.6;
		cursor: not-allowed;
	}

	/* 图标样式 */
	.btn-icon {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.left-icon {
		margin-right: v-bind(iconSpacing);
	}

	.right-icon {
		margin-left: v-bind(iconSpacing);
	}

	/* 点击效果 */
	.custom-button:not(.btn-disabled):active {
		opacity: 0.8;
	}
</style>